<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="savebtn" class="savebtn">存储Cookie</button>
    </div>
</body>

<script>
    // 使用和学习 cookie 必须要使用带有服务器环境的编辑器打开  

    // cookie 是跟服务器有关  域名挂钩  域名区别  (www.taobao.com)

    // cookie 的创建  
    // 1. cookie 的存取都依赖于 document.cookie 
    // 2. cookie是以键值对(key=value)形式存在的字符串  {key:value}   key=value 
    // 3. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)

    // cookie 的读取 
    // 1. cookie 的存取都依赖于 document.cookie 
    // 2. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)
    var savebtn = document.getElementById("savebtn")

    // 存cookie  
    savebtn.onclick = function(){
        // 测试 cookie  数据 
        document.cookie = "user=zkl";
        document.cookie = "pass=123123";
        document.cookie = "phone=18012341234";
        document.cookie = "email=123123@qq.com";
    }

</script>
</html>